import themeDarkConfig from "@/assets/styles/theme-dark.json";
import themeLightConfig from "@/assets/styles/theme-light.json";
import { useThemeStore } from '@/store'
/**主题前缀 */
export const keyThemePrefix = "theme_";

/**主题模式 枚举 */
export const enum themeModeEnum {
    dark = "dark",
    light = "light",
}

/**主题map，方便在主题切换组件中取值 */
export const themeModeMap = new Map<string, string>([
    [themeModeEnum.dark, "暗色主题"],
    [themeModeEnum.light, "亮色主题"],
])

/**
 * 设置样式属性
 * @param key 样式名
 * @param value  样式值
 */
function setStyleProperty(key: string, value: string) {
    document.getElementsByTagName("body")[0].style.setProperty(key, value);
}
/**
 * 从缓存或默认json样式配置中全局设置样式变量
 */
export const initTheme = () => {
    try {
        if (JSON.parse(localStorage.getItem("theme")).theme === "dark") {
            themeChange(themeModeEnum.dark, false);
        } else {
            themeChange(themeModeEnum.light, false);
        }
    } catch (error) {
        themeChange(themeModeEnum.light, false);
    }

}
/**
 * 切换主题模式
 * @param mode 主题模式
 * @param electronChange 窗口是否需要同步修改 默认需要
 */
export function themeChange(mode: string, electronChange = true) {
    // app状态管理
    const themeStore = useThemeStore();
    // 设置主题状态
    themeStore.changeThemeTitle(mode)
    // 取到对应主题的json配置
    let themeConfig;
    switch (mode) {
        case themeModeEnum.dark:
            themeConfig = themeDarkConfig;
            break;
        // 补充任意个自定义主题色.......
        default:
            themeConfig = themeLightConfig;
            break;
    }

    // 取到所有样式的key 和 value
    const styleKeys = Object.keys(themeConfig);
    const styleValues = Object.values(themeConfig);

    // 遍历设置全局scss变量的样式
    for (let i = 0; i < styleKeys.length; i++) {
        const styleKey = styleKeys[i];
        /// 走缓存或json配置的默认值
        const styleValue = styleValues[i];
        /// 设置样式
        setStyleProperty(styleKey, styleValue as string);
    }
}
export default {
    themeChange,
    initTheme,
    setStyleProperty,
    keyThemePrefix,
};

